<template>
    <!--渠道数据-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('common.channelData')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item prop="date">
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.date"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.startDate')"
                                    :end-placeholder="$t('common.endDate')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="utmSource">
                            <el-input v-model="form.utmSource" :disabled="!choseSource || isChannelProvider" clearable :placeholder="$t('common.channel')" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" v-if="!isChannelProvider">
                        <el-form-item prop="appPackage" label="">
                            <select-app-list type="packageName" v-model="form.appPackage" :placeholder="$t('system.appPackage')"></select-app-list><!--app包名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" v-if="!isChannelProvider">
                        <el-form-item :label="$t('common.queryAllChannel')">
                            <el-switch v-model="form.allSource"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="beforeExportExcel" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <el-popover
                placement="left-start"
                :width="language === 'zh' ? '500px' : '800px'"
                trigger="hover">
                <div class="explanationDialog">
                    <p>{{ $t('common.firstActivations') }} = {{ $t('common.firstActivationsFormula') }}</p><!--首次激活数-->
                    <p>{{ $t('common.repeatActivations') }} = {{ $t('common.repeatActivationsFormula') }}</p><!--重复激活数-->
                    <p>{{ $t('common.registerNumber') }} = {{ $t('common.registerNumberFormula') }}</p><!--注册数-->
                    <p>{{ $t('common.applyNumber') }} = {{ $t('common.applyNumberFormula') }}</p><!--申请数-->
                    <p v-if="!isChannelProvider">{{ $t('common.passNumber') }} = {{ $t('common.passNumberFormula') }}</p><!--通过数-->
                    <p v-if="!isChannelProvider || isAdvancedChannelProvider">{{ $t('common.loanNumber') }} = {{ $t('common.loanNumberFormula') }}</p><!--放款数-->
                    <p v-if="!isChannelProvider">{{ $t('common.overdueNumber') }} = {{ $t('common.overdueNumberFormula') }}</p><!--逾期数-->
                </div>
                <i slot="reference" class="el-icon-question"></i>
            </el-popover>
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="statisticsDate" :label="$t('common.date')" min-width="120"><!--日期--></el-table-column>
                        <el-table-column prop="utmSource" :label="$t('common.channel')" min-width="120"></el-table-column><!--渠道-->
                        <el-table-column prop="utmMedium" :label="$t('common.media')" min-width="120"></el-table-column><!--媒体-->
                        <el-table-column prop="activateCount" :label="$t('common.firstActivations')" min-width="120"></el-table-column><!--首次激活数-->
                        <el-table-column prop="invalidActivateCount" :label="$t('common.repeatActivations')" min-width="150"></el-table-column><!--重复激活数-->
                        <el-table-column prop="registerCount" :label="$t('common.registerNumber')" min-width="120"></el-table-column><!--注册数-->
                        <el-table-column prop="orderCount" :label="$t('common.applyNumber')" min-width="120"></el-table-column><!--申请数-->
                        <el-table-column prop="auditSuccessCount" v-if="!isChannelProvider" :label="$t('common.passNumber')" min-width="120"></el-table-column><!--通过数-->
                        <el-table-column prop="loanSuccessCount" v-if="!isChannelProvider || isAdvancedChannelProvider" :label="$t('common.loanNumber')" min-width="120"></el-table-column><!--放款数-->
                        <el-table-column prop="overdueCount" v-if="!isChannelProvider" :label="$t('common.overdueNumber')" min-width="120"></el-table-column><!--逾期数-->
                    </el-table>
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import SelectAppList from '@/components/select-app-list';

    let that = null;
    export default {
        name: 'report',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    date: '',
                    utmSource: '',
                    appPackage: '',
                    allSource: false
                },
                choseSource: true,
                rules: {},
                userId: this.$storage.get('user').id,
                userName: this.$storage.get('user').username,
                skillTypeId: this.$storage.get('user').skillTypeId,
                language: this.$storage.getLocal('language'),
                isChannelProvider: false,
                isAdvancedChannelProvider: false // 高级渠道商 比其他渠道商多看个放款
            };
        },
        watch: {
            'form.allSource': function (val) {
                if (val) {
                    this.form.utmSource = 'full';
                    this.choseSource = false;
                }else {
                    this.choseSource = true;
                    this.form.utmSource = '';
                }
            }
        },
        computed: {
            channelName() {
                let userName = this.$storage.get('user').username;
                let symbolIndex = userName.indexOf('@');
                if (symbolIndex > -1) {
                    return userName.substring(0, symbolIndex);
                }else {
                    return userName;
                }
            }
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page,callBack) {
                const params = this.fillParams(page);
                this.$api.report.queryReport(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        if (callBack) {
                            if (data.page.totalRecord <= 30000) {
                                callBack();
                                return;
                            }else {
                                this.$message.warning(this.$t('common.exportTips'));
                                return;
                            }
                        }
                        this.tableData = data.resultData || [];
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 200;
                });
            },
            // 搜索列表数据
            search() {
                const form = this.form;
                if(!form.date) {
                    this.$message.warning(this.$tc('verify.plsChooseDate'));
                    return;
                }
                this.page.currentPage = 1;
                this.getTableData();
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    utmSource: '',
                    appPackage: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.date) {
                    params.beginDate = form.date[0];
                    params.endDate = form.date[1];
                }
                return params;
            },
            beforeExportExcel() {
                if (!this.form.date) {
                    this.$message.warning(this.$t('verify.plsChooseDate'));
                    return;
                }
                this.getTableData(this.page,this.exportExcel)
            },
            exportExcel() {
                let params = this.fillParams();
                const user = this.$storage.get("user");
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                params.username = user.username;
                params.skillTypeId = user.skillTypeId;
                params.utmSource = encodeURIComponent(params.utmSource); //针对特殊渠道转码
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.report.exprotUserDataSourceInfo, ["page"]);
                this.$openNewBlank(url);
            },
        },
        created() {
            that = this;
            if (this.skillTypeId === 9) {
                if (this.userName === 'CLsms@pesopop') {
                    this.isAdvancedChannelProvider = true;
                }
                this.isChannelProvider = true;
                this.form.utmSource = this.channelName;
            }
            // this.getTableData({currentPage: this.page.currentPage}, this.form);
        },
    };
</script>

<style lang="scss">
    [data-page=report-channelData] {
        .noteRed {
            color: red;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .module_content {
            position: relative;
        }
        .el-icon-question {
            position: absolute;
            right:5px;
            top: 5px;
            color: #47c5b2;
            font-size: 42px;
            z-index: 999;
        }
        .explanationDialog {
            word-break: keep-all;
            word-wrap: break-word;
            line-height:20px;
            p {
                margin: 6px 0 0 0;
            }
            h2 {
                font-size: 16px;
                font-weight: bold;
            }
            .mt-20 {
                margin-top:20px;
            }
        }
    }
</style>
